<template>
	<view>
		<view v-if="(profile || null) != null" class="page-bottom-fixed">
			<view class="container">
				<view class="header bg-gradient">
					<view class="header-content">
						<view class="info">
							<text v-if="profile.name !=''" class="name">{{ profile.name }}</text>
							<text v-else class="name">{{ profile.user.nickname }}</text>
							<view class="contact-info">
								<view class="contact-item">
									<uni-icons type="shop" size="14" color="#FFFFFF"></uni-icons>
									<text class="t1">{{ profile.company.name }}</text>
									<text v-if="site_for_led == 0" class="t1">·</text>
									<text v-if="site_for_led == 0" class="t1">{{ profile.position_type_name || '经理' }}</text>
								</view>
								<view class="contact-item">
									<uni-icons type="phone" size="14" color="#FFFFFF"></uni-icons>
									<text class="t1" v-if="(user || null) != null">{{ profile.contact_tel }}</text>
									<text class="t1" v-else>{{ profile.contact_tel_view }}</text>
								</view>
								<view class="contact-item" v-if="profile.wechat != ''">
									<uni-icons type="chatboxes" size="14" color="#FFFFFF"></uni-icons>
									<text class="t1" v-if="(user || null) != null">{{ profile.wechat }}</text>
									<text class="t1" v-else>{{ profile.wechat_view }}</text>
								</view>
								<view class="contact-item">
									<uni-icons type="location" size="14" color="#FFFFFF"></uni-icons>
									<text class="t1">{{ profile.province_name }} {{ profile.city_name }}</text>
								</view>
							</view>
						</view>
						<view class="avatar-wrapper">
						  <image v-if="profile.logo" :src="profile.logo" class="avatar" mode="aspectFill"></image>
						  <view v-else class="avatar-placeholder">
						     <text v-if="profile.name !=''">{{ getFirstChar(profile.name) }}</text>
							 <text v-else>{{ getFirstChar(profile.user.nickname) }}</text>
						  </view>
						</view>
					</view>
					<view class="card-label impressions">
						<view class="impression-tags">
							<text class="tag">{{profile.category.name}}</text>
							<block v-if="profile.com_label_arr.length > 0">
								<text v-for="(item2, index2) in profile.com_label_arr" :key="index2" class="tag">{{ item2 }}</text>
							</block>
						</view>
					</view>
				</view>

				<view class="quick-actions">
					<view v-for="(action, index) in quickActions" :key="index" class="action-item" :data-value="action.action" @tap="quick_actions">
						<view class="action-icon">
							<uni-icons :type="action.icon" size="22"></uni-icons>
						</view>
						<text class="action-label">{{ action.label }}</text>
					</view>
				</view>
				
				<view  class="action-buttons">
					<button v-if="profile.wx_ma != ''" class="btn btn-outline" @tap="popup_wxpic_event">加企微好友</button>
					<button class="btn btn-primary" @tap="popup_share_event">分享名片</button>
				</view>

				<view class="stats">
					<view class="stat-item">
						<uni-icons type="eye" size="16" color="#10b981"></uni-icons>
						<text>{{ profile.access_count }} {{$t('detail.detail.e6ga1y')}}</text>
					</view>
					<view class="spacer"></view>
					<view v-if="profile.is_open_zan == 1" class="stat-item" @tap="dianzan">
						<block v-if="(user || null) != null && profile.have_zan == 1">
							<uni-icons type="hand-up-filled" size="16" color="#ef4444"></uni-icons>
							<text class="liked">已赞</text>
						</block>
						<block v-else>
							<uni-icons type="hand-up" size="16" color="#10b981"></uni-icons>
							<text>点赞</text>
						</block>
					</view>
				</view>

				<view v-if="profile.com_zhengshu_arr.length > 0" class="card certificates">
					<view class="card-title">
						<uni-icons class="ct-icon" type="medal" size="18" color="#f59e0b"></uni-icons>
						<text>证书资质</text>
					</view>
					<view class="certificate-list">
						<view v-for="cert in profile.com_zhengshu_arr" :key="cert.id" class="certificate-item">
							<image :src="cert.icon" mode="aspectFit" class="certificate-icon"></image>
							<text class="certificate-name">{{ cert.name }}</text>
						</view>
					</view>
				</view>

				<!--<view class="card introduction" v-if="profile.com_describe != ''">
					<view class="card-title">
						<uni-icons class="ct-icon" type="info" size="18" color="#10b981"></uni-icons>
						<text>简介</text>
					</view>
					<view class="introduction-text">
						{{ profile.com_describe }}
					</view>
				</view>-->
				
				<view class="card introduction">
					<view class="card-title">
						<uni-icons class="ct-icon" type="list" size="18" color="#10b981"></uni-icons>
						<text>介绍</text>
					</view>
					<view class="introduction-text">
						<mp-html :content="profile.content" />
					</view>
				</view>
				
				<component-popup :propShow="show_wx_pic" @onclose="popup_wxpic_close_event">
					<view class="padding-horizontal-main padding-top-main bg-white">
					    <view class="close oh">
					        <view class="fr" @tap.stop="popup_wxpic_close_event">
					            <icon type="clear" size="20"></icon>
					        </view>
					    </view>
					    <view class="padding-bottom-main">
					        <view class="user-wx-pic">
					        	<image :src="profile.wx_ma" mode="aspectFit" class="wx-image"></image>
					        </view>
					    </view>
					</view>
				</component-popup>
			</view>
		</view>
		<view v-else>
		    <component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg"></component-no-data>
		</view>
		
		<component-share-popup :diyTheme="diytheme" ref="share"></component-share-popup>
		
		<!-- #ifdef APP-PLUS -->
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
		<!-- #endif -->
		<component-classinfo-footer :propBaseData="data_base"></component-classinfo-footer>
	</view>
</template>

<script>
	const app = getApp();

	// #ifdef APP-PLUS
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	// #endif
	import componentNoData from '@/components/no-data/no-data';
	import componentPopup from "@/components/popup/popup";
	import componentClassinfoFooter from '../public/footer';
	import {classinfo_base_info} from '@/pages/fcc/classinfo/public/common.js';
	import componentSharePopup from "@/components/share-popup/share-popup";
	
	var common_static_url = app.globalData.get_static_url('common');
	var static_url_mini = app.globalData.get_static_url('classinfo', true);
	export default {
		data() {
			return {
				common_static_url: common_static_url,
				static_url_mini: static_url_mini,
				permissionID: '',
				peraction: '',
				params: null,
				user: null,
				data_base: null,
				data_list_loding_status: 1,
				data_list_loding_msg: '',
				data_bottom_line_status: false,
				profile: null,
				quickActions: [],
				diytheme: app.globalData.get_fcc_theme_color() || null,
				share_info: null,
				show_wx_pic: false,
				site_for_led: app.globalData.data.site_for_led,
			}
		},
		components: {
			// #ifdef APP-PLUS
			ykAuthpup,
			// #endif
		    componentNoData,
			componentPopup,
			componentClassinfoFooter,
			componentSharePopup
		},
		onLoad(params) {
			app.globalData.page_event_onload_handle(params);
			params = app.globalData.launch_params_handle(params);
			this.setData({
				params: params,
			});
			this.init();
		},
		
		onShow() {
			app.globalData.page_event_onshow_handle();
		},
		onPullDownRefresh() {
		    this.init();
		},
		methods: {
			init() {
				classinfo_base_info()
				.then(data=>{
					var user = app.globalData.get_user_cache_info();
					if (user != null) {
						this.setData({
							user: user,
							data_base: data
						});
					}else{
						this.setData({
							data_base: data
						});
					}
					this.get_data();
				});
			},
			get_data() {
			    uni.showLoading({
			        title: this.$t('common.loading_in_text'),
			    });
			    uni.request({
			        url: app.globalData.get_request_url('carddetail', 'index', 'classinfo'),
			        method: 'POST',
			        data: {
			            id: this.params.id || 0,
			        },
			        dataType: 'json',
			        success: (res) => {console.log(res);
			            uni.hideLoading();
			            uni.stopPullDownRefresh();
			            var data = res.data.data;
			            if (res.data.code == 0 && (data.data || null) != null) {
			                var info = data.data || null;
			                var base = data.base || null;
			                this.setData({
			                    data_bottom_line_status: true,
			                    data_list_loding_status: 3,
			                    profile: info,
								quickActions: data.quickActions,
			                });
			
			                if (info != null) {
			                    this.setData({
			                        share_info: {
			                            title: info.name,
			                            desc: info.com_describe,
			                            path: '/pages/fcc/classinfo/companycard-detail/companycard-detail',
			                            query: 'id=' + info.id,
			                            img: info.logo,
			                        },
			                    });
			                    uni.setNavigationBarTitle({ title: info.name });
			                }
			            } else {
			                this.setData({
			                    data_list_loding_status: 0,
			                    data_list_loding_msg: res.data.msg,
			                });
			                app.globalData.showToast(res.data.msg);
			            }
			            app.globalData.page_share_handle(this.share_info);
			        },
			        fail: () => {
			            uni.hideLoading();
			            uni.stopPullDownRefresh();
			            this.setData({
			                data_list_loding_status: 2,
			            });
			            app.globalData.showToast(this.$t('common.internet_error_tips'));
			        },
			    });
			},
			dianzan(){
				if(!app.globalData.is_single_page_check()) {
				    return false;
				}
				var user = app.globalData.get_user_info(this, 'dianzan');
				if (user != false) {
					uni.showLoading({
						title: this.$t('common.processing_in_text'),
					});
					uni.request({
						url: app.globalData.get_request_url('cardzan', 'index', 'classinfo'),
						method: 'POST',
						data: {
							id: this.params.id || 0,
						},
						dataType: 'json',
						success: res => {
							uni.hideLoading();
							if (res.data.code == 0) {
								var temp_profile = this.profile;
								temp_profile['have_zan'] = 1;
								this.setData({
									profile: temp_profile,
									user: user
								});
								app.globalData.showToast(res.data.msg, 'success');
							} else {
								if (app.globalData.is_login_check(res.data, this, 'goods_favor_event')) {
									app.globalData.showToast(res.data.msg);
								}
							}
						},
						fail: () => {
							uni.hideLoading();
							app.globalData.showToast(this.$t('common.internet_error_tips'));
						}
					});
				}
			},
			getFirstChar(name) {
				return name ? name.charAt(0) : '?';
			},
			popup_share_event() {
			    if ((this.$refs.share || null) != null) {
			        this.$refs.share.init({
			            status: true,
			            share_info: this.share_info
			        });
			    }
			},
			popup_wxpic_event() {
			    this.setData({
			        show_wx_pic: true
			    });
			},
			popup_wxpic_close_event() {
			    this.setData({
			        show_wx_pic: false
			    });
			},
			// #ifdef APP-PLUS
			changeAuth(e){
				if(this.permissionID == 'WRITE_EXTERNAL_STORAGE')
				{
					if(this.peraction == 'previewImage')
					{
						app.globalData.save_image_by_url(e);
					}
				}else{
					app.globalData.call_tel(e);
				}
			},
			// #endif
			quick_actions(e){
				var action = e.currentTarget.dataset.value || '';
				if(action != '')
				{
					if(action == 'makeCall')
					{
						this.makeCall();
					}else if(action == 'viewAddress')
					{
						this.viewAddress();
					}else if(action == 'savePhone')
					{
						this.savePhone();
					}else if(action == 'copyWechat')
					{
						this.copyWechat();
					}
				}
			},
			makeCall() {
				var user = app.globalData.get_user_info(this, 'makeCall');
				if (user != false) {
					if(app.globalData.is_android())
					{
						this.permissionID = 'CALL_PHONE';
						var tel = this.profile.contact_tel;
						setTimeout(()=>{
							this.$refs['authpup'].open(tel);
						},500);
					}else{
						app.globalData.call_tel(this.profile.contact_tel);
					}
				}else{
					app.globalData.showToast(this.$t('setup.setup.nwt4o1'));
				}
			},
			viewAddress() {
				var user = app.globalData.get_user_info(this, 'viewAddress');
				if (user != false) {
					var data = this.profile;
					var name = data.name || '';
					var address = (data.province_name || '') + (data.city_name || '') + (data.county_name || '') + (data.address || '');
					app.globalData.open_location(data.lng, data.lat, name, address);
				}else{
					app.globalData.showToast(this.$t('setup.setup.nwt4o1'));
				}
			},
			savePhone() {
				var user = app.globalData.get_user_info(this, 'savePhone');
				if (user != false) {
					app.globalData.text_copy_event(this.profile.contact_tel);
				}else{
					app.globalData.showToast(this.$t('setup.setup.nwt4o1'));
				}
			},
			copyWechat() {
				var user = app.globalData.get_user_info(this, 'copyWechat');
				if (user != false) {
					app.globalData.text_copy_event(this.profile.contact_wx);
				}else{
					app.globalData.showToast(this.$t('setup.setup.nwt4o1'));
				}
			}
		}
	}
</script>

<style scoped>
/* 页面容器 */
.page-bottom-fixed {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 120rpx;
}

.container {
	width: 100%;
}

/* 头部样式 */
.bg-gradient {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	padding: 40rpx 30rpx 30rpx;
	position: relative;
	overflow: hidden;
}

.bg-gradient::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
	animation: rotate 20s linear infinite;
}

@keyframes rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}

.info {
	flex: 1;
	margin-right: 20rpx;
}

.name {
	font-size: 44rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 20rpx;
	text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.contact-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
	color: rgba(255,255,255,0.95);
	font-size: 26rpx;
}

.contact-item .t1 {
	color: rgba(255,255,255,0.95);
}

.avatar-wrapper {
	flex-shrink: 0;
}

.avatar {
	width: 140rpx;
	height: 140rpx;
	border-radius: 70rpx;
	border: 4rpx solid rgba(255,255,255,0.3);
	box-shadow: 0 8rpx 16rpx rgba(0,0,0,0.2);
}

.avatar-placeholder {
	width: 140rpx;
	height: 140rpx;
	border-radius: 70rpx;
	background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 52rpx;
	font-weight: bold;
	color: #ffffff;
	border: 4rpx solid rgba(255,255,255,0.3);
	box-shadow: 0 8rpx 16rpx rgba(0,0,0,0.2);
}

/* 标签样式 */
.card-label {
	margin-top: 24rpx;
	position: relative;
	z-index: 1;
}

.impression-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
}

.tag {
	background: rgba(255,255,255,0.25);
	backdrop-filter: blur(10rpx);
	color: #ffffff;
	padding: 8rpx 20rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	border: 1rpx solid rgba(255,255,255,0.3);
}

/* 快捷操作 */
.quick-actions {
	display: flex;
	justify-content: space-around;
	background: #ffffff;
	margin: 20rpx 30rpx;
	padding: 30rpx 0;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06);
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12rpx;
	padding: 10rpx 20rpx;
	transition: all 0.3s;
}

.action-item:active {
	transform: scale(0.95);
	opacity: 0.8;
}

.action-icon {
	width: 88rpx;
	height: 88rpx;
	border-radius: 44rpx;
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.3);
}

.action-label {
	font-size: 24rpx;
	color: #666666;
}

/* 按钮组 */
.action-buttons {
	display: flex;
	gap: 20rpx;
	margin: 0 30rpx 20rpx;
}

.btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	border: none;
	transition: all 0.3s;
}

.btn:active {
	transform: scale(0.98);
}

.btn-outline {
	background: #ffffff;
	color: #10b981;
	border: 2rpx solid #10b981;
}

.btn-primary {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	color: #ffffff;
	box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.3);
}

/* 统计信息 */
.stats {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #ffffff;
	margin: 0 30rpx 20rpx;
	padding: 24rpx 30rpx;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06);
}

.stat-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 26rpx;
	color: #666666;
}

.stat-item .liked {
	color: #ef4444;
}

.spacer {
	flex: 1;
}

/* 卡片通用样式 */
.card {
	background: #ffffff;
	margin: 0 30rpx 20rpx;
	padding: 30rpx;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06);
}

.card-title {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 24rpx;
	padding-bottom: 16rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.ct-icon {
	flex-shrink: 0;
}

/* 证书列表 */
.certificate-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.certificate-item {
	width: calc(33.33% - 14rpx);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12rpx;
	padding: 20rpx;
	background: #fef3c7;
	border-radius: 12rpx;
	border: 2rpx solid #fbbf24;
	box-sizing: border-box;
}

.certificate-icon {
	width: 60rpx;
	height: 60rpx;
}

.certificate-name {
	font-size: 24rpx;
	color: #92400e;
	text-align: center;
}

/* 简介文本 */
.introduction-text {
	font-size: 28rpx;
	color: #666666;
	line-height: 1.8;
	text-align: justify;
}

/* 弹窗样式 */
.padding-horizontal-main {
	padding-left: 30rpx;
	padding-right: 30rpx;
}

.padding-top-main {
	padding-top: 30rpx;
}

.padding-bottom-main {
	padding-bottom: 30rpx;
}

.bg-white {
	background: #ffffff;
}

.close {
	margin-bottom: 20rpx;
}

.oh {
	overflow: hidden;
}

.fr {
	float: right;
}

.user-wx-pic {
	display: flex;
	justify-content: center;
	padding: 20rpx 0;
}

.wx-image {
	width: 500rpx;
	height: 500rpx;
	border-radius: 12rpx;
}
</style>
